<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .news_modular_box {
            display: flex;
            flex-wrap: wrap;
        }

        .news_modular_right_list {
            flex: 66.6666%;
        }

        .news_modular_right_list li {
            flex: 50%;
            padding: 0 30px;
        }

        .news_modular_right_list li:nth-child(n+3) {
            padding-top: 50px;
        }

        .news_modular_right_list_item {
            padding: 10px;
            border: 1px solid var(--c_b_dark);
        }

        .news_modular_right_list_item img {
            width: 100%;
            object-fit: cover;
            height: 260px;
        }

        @media screen and (max-width:768px) {
            .news_modular_title {
                margin-bottom: 5px;
                padding: 0;
            }

            .news_modular_right_list {
                flex: 100%;
                margin-top: 20px;
            }

            .news_modular_right_list ul {
                margin-left: -6px;
                margin-right: -6px;
            }

            .news_modular_right_list li {
                padding: 0 6px;
            }

            .news_modular_right_list li:nth-child(n+3) {
                padding-top: 8px !important;
            }

            .news_modular_right_list_item {
                padding: 6px;
            }

            .news_modular_right_list_item img {
                height: 110px !important;
            }

        }

        .news_modular_left_list {
            flex: 33.3333%;
            display: flex;
            flex-direction: column-reverse;
            justify-content: space-between;
            /* justify-items: center; */
            align-items: center;
        }


        .news_modular_left_list_box {
            text-align: center;
            padding: 10px;
            border: 1px solid var(--c_b_dark);
        }

        .news_modular_left_list_box img {
            width: 100%;
            object-fit: cover;
            height: 420px;
        }

        @media screen and (max-width:768px) {
            .news_modular_left_list {
                padding-right: 0;
            }


            .news_modular_left_list_box {
                padding: 6px;
            }

            .news_modular_left_list_box img {

                height: 179px;
                max-width: 172px;
            }
        }

        /* 布局2 */
        .layout2 .news_modular_box {
            flex-direction: row-reverse;
        }

        /* 布局3 */
        .layout3 .news_modular_box {
            flex-direction: column;
        }

        .layout3 .news_modular_left_list {
            margin-bottom: 50px;
        }

        .layout3 .news_modular_left_list_box {
            width: 100%;
            max-width: 980px;
        }

        .layout3 .news_modular_right_list_item img {
            height: 380px;
        }

        .layout3 .news_modular_right_list li:nth-child(n+3) {
            padding-top: 30px;
        }

        @media screen and (max-width:768px) {

            .layout3 .news_modular_left_list_box {
                width: auto;
            }

            .layout3 .news_modular_left_list {
                margin-bottom: 0px;
            }

        }

        /* 布局4 */
        .layout4 .news_modular_box {
            flex-direction: column-reverse;
        }

        .layout4 .news_modular_left_list {
            margin-top: 50px;
        }

        .layout4 .news_modular_left_list_box {
            width: 100%;
            max-width: 980px;
        }

        .layout4 .news_modular_right_list_item img {
            height: 380px;
        }

        .layout4 .news_modular_right_list li:nth-child(n+3) {
            padding-top: 30px;
        }

        @media screen and (max-width:768px) {
        .layout4 .news_modular_box {
            flex-direction: unset;
        }

            .layout4 .news_modular_left_list_box {
                width: auto;
            }
        }
    </style>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>

</head>

<body>
    <div class="news_modular layout4 title_center modular ">
        <div class="public_width">
            <div class="news_modular_box">
                <div class="news_modular_left_list">
                    <div class="news_modular_left_list_box">
                        <img src="../images/img_collection_3.webp" alt="">
                    </div>
                    <div class="public_title news_modular_left_list_title">
                        <h2>为您提供合适的展览体验</h2>
                        <p>COOPERATION</p>
                    </div>

                </div>
                <div class="news_modular_right_list">
                    <ul class="row">
                        <li>
                            <div class="news_modular_right_list_item">
                                <img src="../images/img_collection_5_2.png" alt="">
                            </div>
                        </li>
                        <li>
                            <div class="news_modular_right_list_item">
                                <img src="../images/img_collection_5_2.png" alt="">
                            </div>
                        </li>
                        <li>
                            <div class="news_modular_right_list_item">
                                <img src="../images/img_collection_5_2.png" alt="">
                            </div>
                        </li>
                        <li>
                            <div class="news_modular_right_list_item">
                                <img src="../images/img_collection_5_2.png" alt="">
                            </div>
                        </li>

                    </ul>
                </div>
            </div>

        </div>

    </div>

</body>

</html>